<!DOCTYPE html>
<html class="x-admin-sm" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <title>用户授权管理</title>
  <!--/*--> 引入css、jq、layui等样式、js <!--*/-->
  <meta th:include="~{layout/layout_hread :: head}">
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/admin">首页</a>
            <a href="/admin/authorization">用户授权管理</a>
          </span>
  <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
     onclick="location.reload()" title="刷新">
    <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
  <div class="layui-row layui-col-space15">
    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-body ">
          <div class="layui-form layui-col-space5">
            <div class="layui-inline layui-show-xs-block">
              <input type="text" id="sreach-content" placeholder="请输入角色名" autocomplete="off"
                     class="layui-input">
            </div>
            <div class="layui-inline layui-show-xs-block">
              <button class="layui-btn" lay-submit="" id="sreach"><i class="layui-icon">&#xe615;</i>
              </button>
            </div>
          </div>
        </div>
        <div class="layui-card-header">
          <button class="layui-btn" onclick="xadmin.openPage('添加授权','/admin/permissionAdd',800,600,true)"><i
              class="layui-icon"></i>添加授权
          </button>
        </div>
        <div class="layui-card-body layui-table-body layui-table-main">
          <table id="permission-table" lay-filter="permission"></table>
          <script type="text/html" id="barTool">
            <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
          </script>
        </div>
      </div>
    </div>
  </div>
</div>
</body>
<script>
  layui.use(['form', 'jquery', 'table'], function () {
    var laydate = layui.laydate;
    var form = layui.form;
    var $ = layui.jquery;
    var table = layui.table;

    //第一个实例
    table.render({
      elem: '#permission-table'
      , id: 'searchId'
      // , height: 400
      , url: '/admin/permissionList' //数据接口
      , request: {
        limitName: 'size'
      }
      , page: true //开启分页
      , cols: [
        [ //表头
          {field: 'roleName', title: '角色名', width: 180, sort: true, fixed: 'left'}
          , {field: 'source', title: '授权资源', width: 150, sort: true}
          , {field: 'action', title: '授权动作', width: 150, sort: true}
          , {field: 'description', title: '描述', width: 450, sort: true}
          , {fixed: 'right', title: '操作', toolbar: '#barTool', width: 150}
        ]
      ]
      , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
        return {
          "code": res.code, //解析接口状态
          "msg": res.message, //解析提示文本
          "count": res.total, //解析数据长度
          "data": res.data //解析数据列表
        };
      }
    });

    //监听行工具事件
    table.on('tool(permission)', function (obj) {
      var data = obj.data;
      //console.log(obj)
      if (obj.event === 'del') {
        layer.confirm('确认要删除该授权吗？', function (index) {
          $.ajax({
            data: {roleName: data.roleName},
            url: '/admin/permissionDelete',
            sync: false,//关闭异步
            type: 'post',
            success(adata) {
              layer.msg(adata.message);
              if (adata.code == 0) {
                window.setTimeout(function () {
                  obj.del();
                  layer.close(index);
                }, 1200)
              }
            }
          })
        });
      } else if (obj.event === 'edit') {
        xadmin.openPage('添加角色', '/admin/permissionEdit?roleName=' + obj.data.roleName, 670, 450, true)
      }
    });

    $('#sreach').click(function () {
      var search = $('#sreach-content').val()
      table.reload('searchId', {
        url: '/admin/permissionList'
        , where: {'search': search} //设定异步数据接口的额外参数
        , page: true //开启分页
      });
    })

  });
</script>
</html>
